body {
  background: #f4f4f4;
}
#cube-area {
  text-align: center;
}
#cube-area .scroll-box {
  height: 300px;
  width: 300px;
  margin: 200px auto;
  transform-style: preserve-3d;
  animation: toScroll 5s linear infinite;
}
#cube-area .cube {
  height: 300px;
  width: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
}
#cube-area .cube div {
  height: 300px;
  width: 300px;
  position: absolute;
  opacity: 0.68;
}
#cube-area .cube div:nth-of-type(1) {
  transform: translateZ(150px);
}
#cube-area .cube div:nth-of-type(2) {
  transform: translateY(-50%) rotateX(-90deg);
}
#cube-area .cube div:nth-of-type(3) {
  transform: translateX(50%) rotateY(90deg);
}
#cube-area .cube div:nth-of-type(4) {
  transform: translateY(50%) rotateX(-90deg);
}
#cube-area .cube div:nth-of-type(5) {
  transform: translateX(-50%) rotateY(90deg);
}
#cube-area .cube div:nth-of-type(6) {
  transform: translateZ(-150px);
}
@keyframes toScroll {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
